<template>
  <el-input
      v-bind="$attrs"
      v-model="state.paramVal"
      :type="type"
      clearable
      :placeholder="((typeof $attrs.disabled !== 'undefined' && $attrs.disabled !== false) || state.formView) ? '' : ($attrs.placeholder ? $attrs.placeholder : `请输入${label}`)"
      @keyup.enter.native="$emit('emitEnter')"
      :disabled="isValue($attrs.disabled) ? $attrs.disabled : state.formView"
      @input="handleInput"
      @keypress="handleKeyPress"
      @focusout="handleFocusOut"
      :title="state.paramVal"
  >
    <template v-if="$slots.prefix" #prefix>
      <slot name="prefix"/>
    </template>
    <template v-if="$slots.suffix" #suffix>
      <slot name="suffix"/>
    </template>
    <template v-if="$slots.prepend" #prepend>
      <slot name="prepend"/>
    </template>
    <template v-if="$slots.append" #append>
      <slot name="append"/>
    </template>
  </el-input>
</template>

<script setup lang="ts">
import {
  reactive,
  watch,
  inject
} from 'vue'
import {isValue} from "@/utils/czr-util";
const emit = defineEmits(['emitParam'])
const props = defineProps({
  param: {},
  label: {},
  type: {
    type: String,
    default: 'text',
    validator(val: string) {
      return ['text', 'textarea', 'password'].includes(val)
    }
  },
  max: {default: null, type: Number},
  min: {default: null, type: Number},
  decimal: {default: 0, type: Number}
})
const state = reactive({
  paramVal: <any>props.param,
  formView: inject('form-view', false),
})
watch(() => state.paramVal, (n) => {
  emit('emitParam', n)
})
watch(() => props.param, (n) => {
  state.paramVal = n
})
const handleInput = () => {
  const handleReg = (key) => {
    if (props.decimal === 0) {
      key = String(key).replace(/\D/g, "")
    } else {
      const pattern = new RegExp("(\\.\\d{" + props.decimal + "})\\d*")
      key = String(key).replace(/\./g, (match, index) => {
        return index === key.indexOf('.') ? match : '';
      }).replace(/^(\d+)\.(\d+)|[^0-9.]/g, (match, group1, group2) => {
        if (group1 && group2) {
          return group1 + "." + group2
        } else {
          return ""
        }
      }).replace(pattern, "$1")
    }
    return key
  }
  if (String(state.paramVal).startsWith('-')) {
    state.paramVal = '-' + handleReg(state.paramVal)
  } else {
    state.paramVal = handleReg(state.paramVal)
  }
  if (isValue(state.paramVal)) {
    if (isValue(props.max) && Number(state.paramVal) > props.max) {
      state.paramVal = props.max
    }
    if (isValue(props.min) && Number(state.paramVal) < props.min) {
      state.paramVal = props.min
    }
  }
}
const handleKeyPress = (event) => {
  const keyCode = event.keyCode || event.which;
  if (keyCode !== 8 && keyCode !== 46 && keyCode !== 45 && (keyCode < 48 || keyCode > 57)) {
    event.preventDefault()
  }
}
const handleFocusOut = () => {
  if (state.paramVal === '-') {
    state.paramVal = ''
  } else if (isValue(state.paramVal)) {
    state.paramVal = Number(state.paramVal)
  }
}
</script>

<style scoped lang="scss">
</style>
